<template>
  <div class="charging">
    <div class="ipt_list u-f u-f-ac">
      <p class="lable u-f u-f-ac">
        <span class="font14 text_danger" style="margin-right: 3px;">*</span>
        <span class="font14 text_black">{{$t('免押押金')}}：</span>
      </p>
      <el-input
        v-model="deposit"
        :placeholder="$t('请输入免押押金')"
      ></el-input>
      <span class="tip font14 text_danger">{{$t('用户免押租借设备需交多少押金')}}</span>
    </div>

    <div class="ipt_list u-f u-f-ac">
      <p class="lable u-f u-f-ac">
        <span class="font14 text_danger" style="margin-right: 3px;">*</span>
        <span class="font14 text_black">{{$t('非免押押金')}}：</span>
      </p>
      <el-input
        v-model="depositf"
        :placeholder="$t('请输入非免押押金')"
      ></el-input>
      <span class="tip font14 text_danger">{{$t('用户非免押免押租借设备需交多少押金')}}</span>
    </div>

    <div class="ipt_list u-f u-f-ac">
      <p class="lable u-f u-f-ac">
        <span class="font14 text_danger" style="margin-right: 3px;">*</span>
        <span class="font14 text_black">{{$t('充氧宝成本')}}：</span>
      </p>
      <el-input
        v-model="cost"
        :placeholder="$t('请输入成本')"
      ></el-input>
      <span class="tip font14 text_danger">
        {{$t('充氧宝成本价格')}},{{$t('当用户不归还充氧宝时')}},{{$t('与商家分成需扣除的成本')}},
        {{$t('如')}}：{{$t('押金')}}99{{$t('元')}},{{$t('充氧宝')}}75{{$t('元')}},{{$t('分成比')}}50%,{{$t('实际分成为')}}(99-75)*50%=12
      </span>
    </div>
    

    <div class="txt_list u-f u-f-ac">
      <p class="lable u-f u-f-ac">
        <span class="font14 text_danger" style="margin-right: 3px;">*</span>
        <span class="font14 text_black">{{$t('金额大于299之后是否收取订单费用')}}：</span>
      </p>
      <el-radio v-model="billing_sf" :label="1">{{$t('是')}}</el-radio>
      <el-radio v-model="billing_sf" :label="2">{{$t('否')}}</el-radio>
    </div>

    <div class="txt_list u-f u-f-ac">
      <p class="lable u-f u-f-ac">
        <span class="font14 text_danger" style="margin-right: 3px;">*</span>
        <span class="font14 text_black">{{$t('计费单位')}}：</span>
      </p>
      <el-radio v-model="billing_unit" :label="1">{{$t('小时')}}</el-radio>
      <!-- <el-radio v-model="billing_unit" :label="2">{{$t('分钟')}}</el-radio> -->
    </div>

    <div class="ipts_list u-f u-f-ac">
      <p class="lable u-f u-f-ac">
        <span class="font14 text_danger" style="margin-right: 3px;">*</span>
        <span class="font14 text_black">{{$t('计费标准')}}：</span>
      </p>
      <el-input
        v-model="smaller"
        :placeholder="$t('请输入时长')"
      ></el-input>
      <span class="font14 text_black" style="margin: 0 10px;"
        >{{ billing_unit == 1 ? $t('小时') : $t('分钟') }}{{$t('收费')}}</span
      >
      <el-input v-model="amount" :placeholder="$t('请输入金额')"></el-input>
      <span class="font14 text_black" style="margin-left: 10px;">{{$t('元')}}</span>
    </div>

    <div class="ipts_list u-f u-f-ac">

      <p class="lable u-f u-f-ac">
        <span class="font14 text_danger" style="margin-right: 3px;">*</span>
        <span class="font14 text_black">计费区间</span>
      </p>

    </div>

    <div v-for="(item,index) in billingData" style="margin-top: 5px;">
      <div style="display: flex;align-items: center;">
        <el-input style="width: 350px;" v-model="item.datetime" :placeholder="$t('请输入时长')"></el-input>
        
        <span style="margin-left: 10px;margin-right: 10px; "> - </span>

        <el-input style="width: 350px;" v-model="item.datetime1" :placeholder="$t('请输入时长')"></el-input>

        <span class="font14 text_black" style="margin: 0 10px;width: 80px;">
          {{ billing_unit == 1 ? $t("小时") : $t("分钟")
          }}{{ $t("收费") }}
        </span>

        <el-input style="width: 350px;" v-model="item.amount" :placeholder="$t('请输入金额')"></el-input>

        <span class="font14 text_black" style="margin-left: 10px;">
          {{
          $t("元")
          }}
        </span>
      </div>
    </div>

    <div style="display: flex;margin-left: 340px; margin-bottom: 10px;margin-top: 10px;">
            <el-button @click="addBilling">+</el-button>
            <el-button @click="subBilling">-</el-button>
    </div>


    <!-- <div class="ipts_list u-f u-f-ac">
        <p class="lable u-f u-f-ac">
          <span class="font14 text_danger" style="margin-right: 3px;">*</span>
          <span class="font14 text_black">{{ $t('商户收费最高限制') }}：</span>
        </p>
        <el-input
          v-model="hour"
          :placeholder="$t('请输入时长')"
          style="width: 300px;"
        >
         <template slot="prepend">{{ $t('每小时') }}</template>
          <template slot="append">{{ $t('元') }}</template>
      </el-input>
      
         <el-input
            v-model="min"
            :placeholder="$t('请输入分钟')"
            style="width: 300px; margin-left: 20px;"
          >
           <template slot="prepend">{{ $t('每30分钟') }}</template>
            <template slot="append">{{ $t('元') }}</template>
        </el-input>
      </div> -->


    <div class="ipt_list u-f u-f-ac">
      <p class="lable u-f u-f-ac">
        <span class="font14 text_black">免费时长：</span>
      </p>
      <el-input
        v-model="freetime"
        :placeholder="$t('请输入免费时长')"
      ></el-input>
      <span class="tip font14 text_danger"
        >{{$t('用户每次租借前多少分钟免费')}},{{$t('填0或者为空表示不免费')}},{{$t('可输入')}}0-60</span
      >
    </div>
    <div class="ipt_list u-f u-f-ac">
      <p class="lable u-f u-f-ac">
        <span class="font14 text_black">{{$t('当日内最高消费')}}：</span>
      </p>
      <el-input
        v-model="ceiling"
        :placeholder="$t('请输入当日内最高消费')"
      ></el-input>
      <span class="tip font14 text_danger"
        >{{$t('当日内最高消费')}}</span
      >
      
    </div>
    <div class="ipt_list u-f u-f-ac">
      <p class="lable u-f u-f-ac">
        <span class="font14 text_black">{{$t('一日后每天最高消费')}}：</span>
      </p>
      <el-input
        v-model="ceiling1"
        :placeholder="$t('请输入一日后每日最高消费')"
      ></el-input>
      <span class="tip font14 text_danger"
        >{{$t('一日后每日最高消费')}},{{$t('一日之后每日按照此金额来算')}}</span
      >
    </div>
    <div class="txt_list u-f u-f-ac">
        <p class="lable u-f u-f-ac">
          <span class="font14 text_black">{{ $t('超时订单是否自动结束') }}：</span>
        </p>
        <el-radio v-model="auto_end" :label="1">{{ $t('是') }}</el-radio>
        <el-radio v-model="auto_end" :label="0">{{ $t('否') }}</el-radio>
      </div>
    <div class="ipt_list u-f u-f-ac">
      <p class="lable u-f u-f-ac">
        <span class="font14 text_danger" style="margin-right: 3px;">*</span>
        <span class="font14 text_black">{{$t('可借充氧宝电量')}}：</span>
      </p>
      <el-input
        v-model="power"
        :placeholder="$t('请输入电量')"
      ></el-input>
      <span class="tip font14 text_danger">{{$t('充氧宝电量大于等于该值才能被借出')}}</span>
    </div>
    <!-- <div class="ipt_long_list u-f">
      <p class="lable u-f">
        <span class="font14 text_black">{{$t('密码线')}}：</span>
      </p>
      <div class="right u-f u-fw">
        <div
          class="item u-f u-f-ac"
          v-for="(item, index) in wired_amount"
          :key="index"
        >
          <el-input v-model="item.amount" :placeholder="$t('金额')"></el-input>
          <span class="font14 text_black">{{$t('元')}}/{{ item.text }}</span>
        </div>
      </div>
    </div> -->
    <div class="txt_list u-f u-f-ac">
      <p class="lable u-f u-f-ac">
        <span class="font14 text_danger" style="margin-right: 3px;">*</span>
        <span class="font14 text_black">{{$t('提现渠道')}}：</span>
      </p>
      <el-checkbox-group v-model="withdrawal_type">
        <el-checkbox :label="$t('微信')"></el-checkbox>
        <el-checkbox :label="$t('支付宝')"></el-checkbox>
        <el-checkbox :label="$t('银行卡')"></el-checkbox>
      </el-checkbox-group>
    </div>
    <div class="ipt_list u-f u-f-ac">
      <p class="lable u-f u-f-ac">
        <span class="font14 text_danger" style="margin-right: 3px;">*</span>
        <span class="font14 text_black">{{$t('代理提现手续费百分比')}}：</span>
      </p>
      <el-input
        v-model="fee_rate"
        :placeholder="$t('请输入手续费百分比')"
      ></el-input>
      <span class="tip font14 text_danger">{{$t('代理提现手续费百分比')}},{{$t('手续费零头不足1分按1分收取')}}</span>
    </div>
    <!-- 代理 -->
    <div class="ipt_list u-f u-f-ac">
      <p class="lable u-f u-f-ac">
        <span class="font14 text_danger" style="margin-right: 3px;">*</span>
        <span class="font14 text_black">{{$t('代理最低提现金额')}}：</span>
      </p>
      <el-input
        v-model="fee_amount"
        :placeholder="$t('请输入金额')"
      ></el-input>
      <span class="tip font14 text_danger">{{$t('代理最低提现金额')}},{{$t('大于0的正整数')}}</span>
    </div>
    <div class="ipt_list u-f u-f-ac">
      <p class="lable u-f u-f-ac">
        <span class="font14 text_danger" style="margin-right: 3px;">*</span>
        <span class="font14 text_black">{{$t('代理每天最高提现金额')}}：</span>
      </p>
      <el-input
        v-model="withdrawal_day"
        :placeholder="$t('请输入金额')"
      ></el-input>
    </div>
    <!-- 商户管理账户 -->
    <!-- <div class="ipt_list u-f u-f-ac">
      <p class="lable u-f u-f-ac">
        <span class="font14 text_danger" style="margin-right: 3px;">*</span>
        <span class="font14 text_black">{{$t('商户管理账户最低提现金额')}}：</span>
      </p>
      <el-input
        v-model="seller_amount"
        :placeholder="$t('请输入金额')"
      ></el-input>
      <span class="tip font14 text_danger">{{$t('商户管理账户最低提现金额')}},{{$t('大于0的正整数')}}</span>
    </div>
    <div class="ipt_list u-f u-f-ac">
      <p class="lable u-f u-f-ac">
        <span class="font14 text_danger" style="margin-right: 3px;">*</span>
        <span class="font14 text_black">{{$t('商户管理账户每天最高提现金额')}}：</span>
      </p>
      <el-input
        v-model="seller_day"
        :placeholder="$t('请输入金额')"
      ></el-input>
    </div> -->
    

    <div class="ipt_list u-f">
      <p class="lable u-f">
        <span class="font14 text_danger" style="margin-right: 3px;">*</span>
        <span class="font14 text_black">{{$t('代理提现说明')}}：</span>
      </p>
      <el-input
        type="textarea"
        autosize
        v-model="fee_remarks"
        :placeholder="$t('请输入提现说明')"
      ></el-input>
      <span class="tip font14 text_danger">{{$t('代理提现说明')}},{{$t('显示在代理APP提现页面')}}</span>
    </div>

    <el-button class="submit_btn" type="primary" @click="submit" v-if="permissions.indexOf('/set/save') != -1">{{$t('提交')}}</el-button>



  </div>
</template>

<script>
import util from '@/assets/js/util.js'
import { mapState } from "vuex";
export default {
  name: "chargingInfo",
  data() {
    return {
      deposit: 99,
      depositf:999,
      cost: 65,
      billing_unit: 1, // 1 小时  2 分钟
      billing_sf:1,
      auto_end: 0, // 1 小时  2 分钟
      billing_time: "1",
      smaller:"1",
      amount: "1",
      freetime: "5",
      ceiling: "99.00",
      ceiling1:"60.00",
      power: 80,
      withdrawal_type: [],
      wired_amount: [
        { time: 1, text: "1小时", amount: "2" },
        { time: 2, text: "2小时", amount: "3" },
        { time: 3, text: "3小时", amount: "4" },
        { time: 4, text: "4小时", amount: "5" },
        { time: 5, text: "5小时", amount: "6" },
        { time: 6, text: "6小时", amount: "7" },
        { time: 12, text: "12小时", amount: "12" },
      ],
      fee_rate: "",
      fee_amount: "",
      withdrawal_day: "",
      // seller_day: "",
      // seller_amount: "",
      fee_remarks: "",
      // 10.30  商户收费最高限制 
      //hour:"",
      //min:"",
      billingData: [
        {'datetime': '','datetime1':'','amount': 0},
      ],
    };
  },
  computed: {
    ...mapState(['permissions'])
  },
  mounted () {
    this.getData()
  },
  methods: {
    addBilling(){
      var billingData2 = this.billingData;

      billingData2.push({'datetime': '','datetime1':'','amount': ''});
    
      this.billingData = billingData2;
    },
    subBilling(){
      // var billingData2 = this.billingData;
      // array_pop(this.billingData);
      this.billingData.pop();
      // billingData2.push({'datetime': '','datetime1':'','amount': ''});
    
      // this.billingData = billingData2;
    },
    getData() {
      this.withdrawal_type = []
      util.$http2('/set/info', {
        type: 'charge'
      })
      .then(res=>{
        console.log(res.data)
        if(res.code == 1) {
          // console.log(res);
          this.deposit = res.data.deposit
          this.depositf = res.data.depositf
          this.cost = res.data.device_price
          this.billing_unit = Number(res.data.billingunit)
          this.billing_sf = Number(res.data.billingsf)
          this.auto_end = Number(res.data.auto_end)
          this.billing_time = res.data.billingtime
          this.amount = res.data.amount
          this.freetime = res.data.freetime
          this.ceiling = res.data.ceiling
          this.ceiling1 = res.data.ceiling1
          this.power = res.data.battery_power
          this.wired_amount = res.data.wired_amount
          this.fee_rate = res.data.withdrawal_rate
          this.fee_amount = res.data.withdrawal_amount
          
          this.withdrawal_day = res.data.withdrawal_day
          // this.seller_day = res.data.seller_day
          // this.seller_amount = res.data.seller_amount
          this.smaller = res.data.smaller
          // console.log("怎么回事呢2")
          this.billingData = res.data.billingall
          // console.log("怎么回事呢3")
          if(this.billingData == undefined || this.billingData == null || this.billingData.length == 0) {
            this.billingData = [
                {'datetime': '','datetime1':'','amount': 0}
            ];
          }

          // console.log("打印一下子把：");
          // console.log(this.billingData);

          this.fee_remarks = res.data.withdrawal_intro
          // this.hour = res.data.seller_price.hour
          
          // this.min = res.data.seller_price.min
          
          
          for (let item of res.data.withdrawal_type) {
            if(item == 1) {
              this.withdrawal_type.push(this.$t('微信'))
            }else if(item == 2) {
              this.withdrawal_type.push(this.$t('支付宝'))
            }else if(item == 3) {
              this.withdrawal_type.push(this.$t('银行卡'))
            }
          }
        }
      })
    },
    submit() {
      let arr = []
      for (let item of this.withdrawal_type) {
        if(item == this.$t('微信')) {
          arr.push(1)
        }else if(item == this.$t('支付宝')) {
          arr.push(2)
        }else if(item == this.$t('银行卡')) {
          arr.push(3)
        }
      }
      
      util.$http('/set/save', {
        type: 'charge',
        deposit: this.deposit,
        depositf: this.depositf,
        device_price: this.cost,
        billingunit: this.billing_unit,
        billingsf: this.billing_sf,
        auto_end: this.auto_end,
        billingtime: this.billing_time,
        amount: this.amount,
        freetime: this.freetime,
        ceiling: this.ceiling,
        ceiling1: this.ceiling1,
        battery_power: this.power,
        wired_amount: JSON.stringify(this.wired_amount),
        withdrawal_type: arr.join(),
        withdrawal_rate: this.fee_rate,
        withdrawal_amount: this.fee_amount,
        withdrawal_day: this.withdrawal_day,
        // seller_day: this.seller_day,
        // seller_amount: this.seller_amount,
        withdrawal_intro: this.fee_remarks,
        //hour: this.hour,
        //min: this.min,
        smaller: this.smaller,
        billing_data: JSON.stringify(this.billingData)
      })
      .then(res=>{
        if(res.code == 1) {
          this.$message({
            message: res.msg,
            type: 'success'
          })
          this.getData()
        }
      })
    }
  },
};
</script>

<style scoped>
.charging {
  padding: 10px 20px 30px 50px;
}
.charging .ipt_list {
  margin-bottom: 20px;
}
.charging .ipt_list .lable {
  width: 170px;
  margin: 0;
}
.charging .ipt_list .el-input {
  width: 200px;
}
.charging .el-input .el-input__inner {
  height: 36px;
  line-height: 36px;
}
.charging .ipt_list .el-textarea {
  width: 300px;
}
.charging .ipt_list .el-date-editor {
  width: 200px;
}
.charging .ipt_list .tip {
  width: 420px;
  margin: 0 0 0 15px;
}
.charging .ipts_list {
  margin-bottom: 20px;
}
.charging .ipts_list .lable {
  width: 170px;
  margin: 0;
}
.charging .ipts_list .el-input {
  width: 170px;
}
.charging .ipt_long_list {
  margin-bottom: 20px;
}
.charging .ipt_long_list .lable {
  width: 170px;
  margin: 0;
}
.charging .ipt_long_list .item {
  margin-right: 20px;
  margin-bottom: 20px;
}
.charging .ipt_long_list .el-input {
  width: 50px;
  margin-right: 5px;
}
.charging .ipt_long_list .right {
  width: 520px;
}

.charging .txt_list {
  margin-bottom: 20px;
}
.charging .txt_list .lable {
  width: 170px;
  margin: 0;
}
.charging .txt_list .tip {
  width: 420px;
  margin: 0 0 0 15px;
}
.submit_btn{
  margin-top: 30px;
}
</style>

<style>
.charging .ipt_list .el-textarea__inner {
  min-height: 90px !important;
}
</style>
